
// 公共热门-更多
import React, {Component} from 'react';
import {
  Text,
  View,
  TouchableHighlight
} from 'react-native';

import BaseItem from './BaseItem';

import { Button } from 'react-native-elements';

export default class CommonHotMoreView extends Component {
  constructor(props) {
    super(props);

    this._onPressItem = this._onPressItem.bind(this);
  }

  render() {
    return (
      <View style={{flex:1,flexDirection:"column"}} >
        <View style={{flex:1,flexDirection:"row"}} >
          <Button
            title = {this.props.typeData.name}
            icon = {{name: this.props.typeData.icon}}
          />
          <Button
            title = "更多"
            icon = {{name:"more"}}
            onPress = {() => this._onPressMoreBtn()}
          />
        </View>
        <View style={{flex:1,flexDirection:"column"}}>
          {this._renderItems()}
        </View>
      </View>
    )
  }

  _renderItems() {
    if(this.props.datas.length > 0) {
      return this.props.datas.map(data => this._renderItem(data) );
    }
    else{
      return <View></View>;
    }
  }

  _renderItem(data) {
    return (<Item data={data} onPress={() => {this._onPressItem(data, this.props.type)}}/>)
  }

  _onPressMoreBtn() {
    this.props.moreBtnCall();
  }

  _onPressItem(data, type) {
    if(this.props.pressItemCall) {
        this.props.pressItemCall(data, type);
    }
  }
}

class Item extends BaseItem {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <TouchableHighlight onPress={this.props.onPress}>
        <View style={{flex:1,flexDirection:"row", backgroundColor:"#cccccc", height: 30, marginTop: 2}}>
          <Text>{this.props.data.followers_num}人关注</Text>
          <Text>标题:{this.props.data.title}</Text>
        </View>
      </TouchableHighlight>
    )
  }
}
